<template>
  <div>
    <div class="confirmInfo_title">确认信息</div>
    <div class="confirmInfo_list_wrap">
      <ul class="confirmInfo_list">
        <li v-for="(item, index) in confirmInfo" :key="index" class="confirmInfo_item" :class="index === activeConfirmInfo ? 'active' : ''" @click="chooseConfirmInfo(item, index)">
          <div class="confirmInfo_item_filling gl_clear">
            <!-- 个人/团体头像 -->
            <div class="confirmInfo_img_wrap gl_fl">
              <img class="confirmInfo_img" :src="getStaticFileUrl(item.imagePath)" @error="errorPhoto">
              <div class="img_mask" />
            </div>
            <!-- 显示的基本信息 -->
            <div class="confirmInfo_info">
              <div class="confirmInfo_info_title gl_ellipsis" :title="item.name">{{ item.name }}</div>
              <div v-if="!item.name" class="confirmInfo_info_nodata gl_ellipsis">请完善信息</div>
              <div class="confirmInfo_info_desc gl_ellipsis" :title="item.contactPerson">{{ item.contactPerson }}</div>
              <div class="confirmInfo_info_desc gl_ellipsis" :title="item.phoneNumber">{{ item.phoneNumber }}</div>
            </div>
            <!-- 编辑按钮 -->
            <div class="confirmInfo_item_edit" @click="clickEdit(item)">编辑</div>
          </div>
        </li>
        <li v-if="!confirmInfo.length" class="noConfirmInfo">
          您信息缺失，请完善信息。
        </li>
      </ul>
    </div>
    <el-row>
      <el-col :span="24" align="right">
        <el-button type="default" @click="clickGoback()">返回</el-button>
        <el-button v-if="confirmInfo.length" type="primary" @click="clickNextStep()">下一步</el-button>
      </el-col>
    </el-row>

    <!-- 团体编辑弹框 -->
    <el-dialog class="gl_dialog_TitleLine" title="编辑" :visible.sync="dialogVisibleForTeam" :close-on-click-modal="false" width="1200px">
      <delegation-info ref="refDelegationInfo" :team-data="createDelegationInput" :is-default-check="createDelegationInput.isApproved" />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisibleForTeam = false">{{ $t('button.cancel') }}</el-button>
        <el-button size="mini" :loading="teamInfoLoading" type="primary" @click="submitTeamInfo">{{ $t('button.submit') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { CopyData } from '@/lib';

import {
  api_POST_EventsManagementDelegation, // 新建机构
  api_PUT_EventsManagementDelegationId
} from '@/extend/api/gameswaggerApi/app';

import {
  SiSTKWEventsManagementCreateDelegationInput
} from '@/lib/form/game/swaggerForm';

import defaultPhoto from '@/assets/images/face_default.png';
import delegationInfo from '@/components/DelegationInfo';

export default {
  components: {
    delegationInfo
  },
  props: {
    requiredIdData: {
      type: Object,
      default () {
        return {};
      }
    },
    isShow: {
      type: Boolean
    },
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    // 当前用户团体信息
    userTeamInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    // 字典信息
    dict: {
      type: Object,
      default () {
        return {};
      }
    },
    // 字典信息
    district: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  data () {
    return {
      activeConfirmInfo: 0, // 当前选中项，如果是多选，不选状态为 -1
      defaultPhoto: defaultPhoto, // 默认照片
      createDelegationInput: new SiSTKWEventsManagementCreateDelegationInput(),
      dialogVisibleForTeam: false, // 控制团体信息弹窗显示
      confirmInfo: [], // 数据信息集合
      teamInfoLoading: false
    };
  },
  computed: {
    ...mapState({
      cache: state => state.dict.cache
    }),
    dictCardTypeMap() {
      const _map = {};
      this.dict.idCardType.forEach(item => {
        _map[item.code] = item;
      });
      return _map;
    }
  },
  watch: {
    dialogVisibleForTeam(val) {
      if (!val) {
        this.$refs.refDelegationInfo.clearInsideTeamData();
        this.createDelegationInput = new SiSTKWEventsManagementCreateDelegationInput();
      }
    },
    isShow: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          this.getDictByType(['district']);
          this.confirmInfo = this.userTeamInfo ? [this.userTeamInfo] : [{}];
        }
      }
    },
    userTeamInfo(val) {
      if (val) {
        this.confirmInfo = [this.userTeamInfo];
      }
    }
  },
  methods: {
    // 若没有字典信息，外部可直接调用方法获取字典数据
    ...mapActions({ getDictByType: 'dict/getDictByType' }),
    // 编辑按钮
    clickEdit() {
      this.dialogVisibleForTeam = true;
      if (this.userTeamInfo) {
        CopyData(this.userTeamInfo, this.createDelegationInput);
      }
    },
    // 提交团体信息
    submitTeamInfo() {
      this.$refs.refDelegationInfo.getInsideTeamData()
        .then(
          res => {
            console.log('updateDelegationInfo -> res', res);
            const _delegationId = this.requiredIdData.delegationId;
            if (_delegationId) {
              this.updateDelegationInfo(res);
            } else {
              this.createDelegationInfo(res);
            }
          }
        )
        .catch(
          error => {
            console.log('updateDelegationInfo -> error', error);
          }
        );
    },
    // 更新团体信息
    updateDelegationInfo (data) {
      this.teamInfoLoading = true;
      api_PUT_EventsManagementDelegationId(this.requiredIdData.delegationId, data)
        .then(
          res => {
            this.teamInfoLoading = false;
            this.dialogVisibleForTeam = false;
            this.$message({ type: 'success', message: '操作成功' });
            this.$emit('onGetUserTeamInfo');
          }
        )
        .catch(
          error => {
            this.teamInfoLoading = false;
            this.$message({ type: 'error', message: '修改团体信息失败' });
            console.log('updateDelegationInfo -> error', error);
          }
        );
    },
    // 创建一个团体
    createDelegationInfo (data) {
      this.teamInfoLoading = true;
      api_POST_EventsManagementDelegation(data)
        .then(
          res => {
            this.teamInfoLoading = false;
            this.dialogVisibleForTeam = false;
            this.$message({ type: 'success', message: '操作成功' });
            // 创建团体成功后 重新获取UserType并获取团体信息
            this.$emit('reGetUserType');
          }
        )
        .catch(
          error => {
            this.teamInfoLoading = false;
            this.$message({ type: 'error', message: `创建团体信息失败${'，' + error.error.message || ''}` });
            console.log('updateDelegationInfo -> error', error);
          }
        );
    },
    // 选择机构
    chooseConfirmInfo (item, index) {
      this.activeConfirmInfo = index;
    },
    // 点击执行上一步操作
    clickPrevStep () {
      this.$emit('onPrevStep');
    },
    // 点击执行下一步操作
    clickNextStep () {
      const _isComplete = this.checkInfoComplete();
      if (_isComplete) {
        this.$emit('onNextStep');
      } else {
        this.$message({
          message: `请确认并补全您的基本信息`,
          type: 'warning',
          showClose: true
        });
      }
    },
    // 校验主要信息是否缺失
    checkInfoComplete() {
      let _infoComplete = false;
      _infoComplete =
        Boolean(this.userTeamInfo) &&
        Boolean(this.userTeamInfo.name) &&
        Boolean(this.userTeamInfo.provinceCode) &&
        Boolean(this.userTeamInfo.delegationTypeCode) &&
        Boolean(this.userTeamInfo.phoneNumber);
      console.log('checkInfoComplete -> _infoComplete', _infoComplete);
      return _infoComplete;
    },
    clickGoback () {
      this.$router.go(-1);
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
      img.onerror = null;
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
.confirmInfo_list_wrap {
  min-height: 444px;
  margin-bottom: 20px;
}
.confirmInfo_list {
  display: flex;
  flex-wrap: wrap;
  margin-right: -8px;
}
.confirmInfo_item {
  position: relative;
  box-sizing: border-box;
  width: 380px;
  height: 160px;
  border: 1px solid #979797;
  border-radius: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
}
.confirmInfo_item_filling {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.confirmInfo_item.active {
  border-color: #1890FF;
}
.active .confirmInfo_item_filling {
  border-color: #1890FF;
  border-radius: 6px;
}
.confirmInfo_img_wrap {
  box-sizing: content-box;
  position: relative;
  width: 108px;
  padding-top: 24px;
  height: 108px;
}
.confirmInfo_img {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}
.img_mask {
  position: absolute;
  top: 23px;
  left: 0;
  box-sizing: border-box;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 6px solid rgba(25,47,89,0.46);
}
.confirmInfo_info {
  width: 196px;
  padding-top: 24px;
  margin-left: 132px;
}
.confirmInfo_info_title {
  width: 100%;
  padding: 6px 0;
  min-height: 28px;
  font-size: 20px;
  line-height: 28px;
  color: #353434;
}
.confirmInfo_info_desc,
.confirmInfo_info_type {
  width: 100%;
  padding: 2px 0;
  font-size: 14px;
  line-height: 20px;
}
.confirmInfo_info_nodata {
  width: 100%;
  padding: 2px 0;
  font-size: 14px;
  line-height: 20px;
  text-indent: 1em;
  color: #979797;
}
.confirmInfo_item_edit {
  box-sizing: border-box;
  position: absolute;
  right: 24px;
  bottom: 13px;
  width: 64px;
  height: 30px;
  border: 1px solid #1890FF;
  line-height: 28px;
  border-radius: 4px;
  font-size: 14px;
  color: #1890FF;
  text-align: center;
  cursor: pointer;
}
.noConfirmInfo {
  width: 100%;
  text-align: center;
  padding: 50px 0;
  text-align: center;
  color: #aaa;
}
.boxItem_left{
  width: 70%;
  float: left;
}
.boxItem_right{
  width: 30%;
  float: left;
}
</style>
